<template>
  <aside class="app-aside">
    <div class="aside-container">
      <!-- 侧边栏导航 -->
      <nav class="aside-nav">
        <!-- 用户中心菜单 -->
        <div class="nav-section">
          <h3 class="nav-section-title">用户中心</h3>
          <ul class="nav-list">
            <li class="nav-item">
              <router-link to="/profile" :class="{ active: activeRoute === '/profile' }">
                <el-icon><User /></el-icon>
                <span>个人资料</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/settings" :class="{ active: activeRoute === '/settings' }">
                <el-icon><Setting /></el-icon>
                <span>账号设置</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/collections" :class="{ active: activeRoute === '/collections' }">
                <el-icon><Star /></el-icon>
                <span>我的收藏</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/history" :class="{ active: activeRoute === '/history' }">
                <el-icon><Clock /></el-icon>
                <span>浏览历史</span>
              </router-link>
            </li>
          </ul>
        </div>
        
        <!-- 论坛菜单 -->
        <div class="nav-section">
          <h3 class="nav-section-title">论坛</h3>
          <ul class="nav-list">
            <li class="nav-item">
              <router-link to="/forum" :class="{ active: activeRoute === '/forum' }">
                <el-icon><Message /></el-icon>
                <span>论坛首页</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/forum/hot" :class="{ active: activeRoute === '/forum/hot' }">
                <el-icon><TrendCharts /></el-icon>
                <span>热门话题</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/forum/categories" :class="{ active: activeRoute === '/forum/categories' }">
                <el-icon><Collection /></el-icon>
                <span>论坛分类</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/forum/create" :class="{ active: activeRoute === '/forum/create' }">
                <el-icon><Edit /></el-icon>
                <span>发布帖子</span>
              </router-link>
            </li>
          </ul>
        </div>
        
        <!-- 题库菜单 -->
        <div class="nav-section">
          <h3 class="nav-section-title">题库</h3>
          <ul class="nav-list">
            <li class="nav-item">
              <router-link to="/search-question" :class="{ active: activeRoute === '/search-question' }">
                <el-icon><Document /></el-icon>
                <span>题库首页</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/search-question/categories" :class="{ active: activeRoute === '/search-question/categories' }">
                <el-icon><Menu /></el-icon>
                <span>题目分类</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/online-practice" :class="{ active: activeRoute === '/online-practice' }">
                <el-icon><Operation /></el-icon>
                <span>在线练习</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/ai-chat" :class="{ active: activeRoute === '/ai-chat' }">
                <el-icon><Cpu /></el-icon>
                <span>AI解题</span>
              </router-link>
            </li>
          </ul>
        </div>
        
        <!-- 学习小组菜单 -->
        <div class="nav-section">
          <h3 class="nav-section-title">学习小组</h3>
          <ul class="nav-list">
            <li class="nav-item">
              <router-link to="/study-groups" :class="{ active: activeRoute === '/study-groups' }">
                <el-icon><UserFilled /></el-icon>
                <span>小组广场</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/study-groups/my" :class="{ active: activeRoute === '/study-groups/my' }">
                <el-icon><User /></el-icon>
                <span>我的小组</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/study-groups/create" :class="{ active: activeRoute === '/study-groups/create' }">
                <el-icon><Plus /></el-icon>
                <span>创建小组</span>
              </router-link>
            </li>
          </ul>
        </div>
        
        <!-- 学习资源菜单 -->
        <div class="nav-section">
          <h3 class="nav-section-title">学习资源</h3>
          <ul class="nav-list">
            <li class="nav-item">
              <router-link to="/resources" :class="{ active: activeRoute === '/resources' }">
                <el-icon><FolderOpened /></el-icon>
                <span>资源中心</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/resources/categories" :class="{ active: activeRoute === '/resources/categories' }">
                <el-icon><CollectionTag /></el-icon>
                <span>资源分类</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/resources/upload" :class="{ active: activeRoute === '/resources/upload' }">
                <el-icon><Upload /></el-icon>
                <span>上传资源</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/resources/hot" :class="{ active: activeRoute === '/resources/hot' }">
                <el-icon><TrendCharts /></el-icon>
                <span>热门资源</span>
              </router-link>
            </li>
          </ul>
        </div>
        
        <!-- 管理员菜单 -->
        <div v-if="isAdmin" class="nav-section">
          <h3 class="nav-section-title">管理中心</h3>
          <ul class="nav-list">
            <li class="nav-item">
              <router-link to="/admin" :class="{ active: activeRoute === '/admin' }">
                <el-icon><Monitor /></el-icon>
                <span>管理仪表盘</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/admin/users" :class="{ active: activeRoute === '/admin/users' }">
                <el-icon><Users /></el-icon>
                <span>用户管理</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/admin/forum" :class="{ active: activeRoute === '/admin/forum' }">
                <el-icon><Message /></el-icon>
                <span>论坛管理</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/admin/questions" :class="{ active: activeRoute === '/admin/questions' }">
                <el-icon><Document /></el-icon>
                <span>题库管理</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/admin/groups" :class="{ active: activeRoute === '/admin/groups' }">
                <el-icon><UserFilled /></el-icon>
                <span>小组管理</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/admin/resources" :class="{ active: activeRoute === '/admin/resources' }">
                <el-icon><FolderOpened /></el-icon>
                <span>资源管理</span>
              </router-link>
            </li>
            <li class="nav-item">
              <router-link to="/admin/settings" :class="{ active: activeRoute === '/admin/settings' }">
                <el-icon><Setting /></el-icon>
                <span>系统设置</span>
              </router-link>
            </li>
          </ul>
        </div>
      </nav>
      
      <!-- 侧边栏底部 -->
      <div class="aside-footer">
        <div class="app-info">
          <p class="app-version">GovernTalk v1.0.0</p>
          <p class="copyright">© 2024 公考论坛</p>
        </div>
      </div>
    </div>
  </aside>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import {
  User, Setting, Star, Clock, Message, Collection, Edit,
  Document, Menu, Operation, Cpu, UserFilled, Plus, FolderOpened,
  CollectionTag, Upload, Monitor, User as Users, TrendCharts
} from '@element-plus/icons-vue'

// Props
interface Props {
  isAdmin: boolean
  activeRoute: string
}

defineProps<Props>()
defineEmits<{
  routeChange: [path: string]
}>()
</script>

<style scoped>
.app-aside {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 200px;
  background-color: #fff;
  border-right: 1px solid #f0f0f0;
  overflow-y: auto;
  z-index: 900;
  transition: all 0.3s ease;
}

/* 深色主题样式 */
.dark-mode .app-aside {
  background-color: #1a1a1a;
  border-right-color: #333;
}

.aside-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.aside-nav {
  flex: 1;
  padding: 20px 0;
}

.nav-section {
  margin-bottom: 20px;
}

.nav-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #909399;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 20px 10px;
  padding: 0 5px;
}

.dark-mode .nav-section-title {
  color: #666;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 2px 0;
}

.nav-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: #606266;
  text-decoration: none;
  transition: all 0.3s ease;
  border-left: 3px solid transparent;
}

.nav-item a:hover {
  background-color: #f5f7fa;
  color: #1890ff;
}

.nav-item a.active {
  background-color: #e6f7ff;
  color: #1890ff;
  border-left-color: #1890ff;
}

/* 深色主题导航样式 */
.dark-mode .nav-item a {
  color: #ccc;
}

.dark-mode .nav-item a:hover {
  background-color: #2a2a2a;
  color: #66b1ff;
}

.dark-mode .nav-item a.active {
  background-color: #1e3a5f;
  color: #66b1ff;
  border-left-color: #66b1ff;
}

.nav-item a i {
  font-size: 16px;
}

.nav-item a span {
  font-size: 14px;
}

.aside-footer {
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
}

.dark-mode .aside-footer {
  border-top-color: #333;
}

.app-info {
  text-align: center;
}

.app-version {
  font-size: 12px;
  color: #909399;
  margin: 0 0 5px;
}

.dark-mode .app-version {
  color: #666;
}

.copyright {
  font-size: 11px;
  color: #c0c4cc;
  margin: 0;
}

.dark-mode .copyright {
  color: #555;
}

/* 响应式布局 */
@media (max-width: 1200px) {
  .app-aside {
    width: 160px;
  }
  
  .nav-item a {
    padding: 10px 15px;
  }
}

@media (max-width: 768px) {
  .app-aside {
    display: none;
  }
}

/* 滚动条样式 */
.app-aside::-webkit-scrollbar {
  width: 6px;
}

.app-aside::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.app-aside::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.app-aside::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
</style>